<template>
    <basic-container>
        <avue-crud
                ref="scopeTree"
                :data="tableData"
                :option="option"
                :page="page"
                :destroy-on-close="true"
                @on-load="onLoad"
                @refresh-change="searchHandler"
                @row-del="rowDelete"
                @row-update="rowUpdate"
                @row-save="rowSave"
                @search-change="searchChange"
        >
            <template slot="menuRight" slot-scope="{size}">
                <div style="display: flex">
                    <el-upload
                            class="upload-demo"
                            :action=actionUrl
                            :on-success="uploadSuccess"
                            :on-error="uploadError"
                            :show-file-list="false"
                            :headers="headers"
                            :limit="1">
                        <el-button size="small" type="primary">表格导入</el-button>
                    </el-upload>
                    <el-button size="small" type="info">模板下载</el-button>
                </div>
            </template>
        </avue-crud>
    </basic-container>
</template>

<script>
    import {addBedroomType, getBedroomType, updateBedroomType, deleteBedroomType} from "@/api/objective/bedroomType"
    import {baseUrl} from '@/config/env'
    import { getToken } from '@/util/auth'
    import website from '@/config/website'

    export default {
        name: "bedroomType",
        data() {
            return {
                headers:{

                },
                page: {
                    pageSize: 10,
                    total: 100
                },
                searchForm: {
                    currentPage: 1,
                    pageSizes: 10
                },
                actionUrl: baseUrl + '/pc/bedroom-type/upload',
                tableData: [],
                option: {
                    border: true,
                    index: true,
                    indexLabel: '序号',
                    stripe: true,
                    menuAlign: 'center',
                    editBtn: true,
                    delBtn: true,
                    searchMenuSpan: 6,
                    align: 'center',
                    addBtn: true,
                    viewBtn: true,
                    column: [{
                        search: true,
                        label: '学期',
                        prop: 'termId',
                        span: 24,
                        type: 'select',
                        remote: true,
                        dicUrl: `${baseUrl}/pc/term/all`,
                        props: {
                            label: 'term',
                            value: 'id'
                        },
                        rules: [{
                            required: true,
                            message: '学期不能为空',
                            trigger: 'blur'
                        }]
                    }, {
                        search: true,
                        label: '学号',
                        prop: 'studentKey',
                        span: 24,
                        rules: [{
                            required: true,
                            message: '学号不能为空',
                            trigger: 'blur'
                        }]
                    }, {
                        addDisplay: false,
                        editDisplay: false,
                        search: true,
                        label: '姓名',
                        prop: 'name',
                        span: 24,
                        rules: [{
                            required: true,
                            message: '姓名不能为空',
                            trigger: 'blur'
                        }]
                    }, {
                        search: true,
                        label: '寝室等级',
                        prop: 'type',
                        type: 'select',
                        span: 24,
                        dicData: [{
                            label: '文明寝室',
                            value: 10
                        }, {
                            label: '普通寝室',
                            value: 20
                        }, {
                            label: 'C寝室',
                            value: 30
                        }],
                        rules: [{
                            required: true,
                            message: '寝室等级不能为空',
                            trigger: 'blur'
                        }]
                    }, {
                        search: true,
                        label: '所属班级',
                        prop: 'classId',
                        type: 'select',
                        addDisplay: false,
                        editDisplay: false,
                        remote: true,
                        props: {
                            label: 'className',
                            value: 'id'
                        },
                        dicUrl: `${baseUrl}/pc/stu-class/byName`,
                        span: 24,
                        rules: [{
                            required: true,
                            message: '所属班级不能为空',
                            trigger: 'blur'
                        }]
                    }, {
                        search: true,
                        label: '所属支部',
                        prop: 'departmentId',
                        type: 'select',
                        remote: true,
                        addDisplay: false,
                        editDisplay: false,
                        props: {
                            label: 'name',
                            value: 'id'
                        },
                        dicUrl: `${baseUrl}/pc/department/all`,
                        span: 24,
                        rules: [{
                            required: true,
                            message: '所属支部不能为空',
                            trigger: 'blur'
                        }]
                    }]
                }
            }
        }, created() {
            this.headers[website.Authorization] = getToken()
        },methods: {
            uploadError() {
                this.$message.success('上传失败')
            },
            uploadSuccess() {
                this.$message.success('上传成功')
                this.searchHandler()
            },
            rowSave(form, done, loading) {
                loading()
                addBedroomType(form).then(() => {
                    this.$message.success('添加成功')
                    this.searchHandler()
                }).finally(() => {
                    done()
                })
            },
            rowUpdate(row, index, done, loading) {
                loading()
                updateBedroomType(row).then(() => {
                    this.$message.success('更新成功')
                    this.searchHandler()
                }).finally(() => {
                    done()
                })
            },
            rowDelete(form) {
                this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    deleteBedroomType([form.id]).then(() => {
                        this.$message.success('删除成功')
                        this.searchHandler()
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    })
                })
            },
            searchChange(params, done) {
                this.searchForm = params
                this.searchForm.currentPage = 1
                this.searchForm.pageSizes = 10
                this.searchHandler()
                done()
            },
            onLoad(page) {
                this.searchForm.currentPage = page.currentPage
                this.searchForm.pageSize = page.pageSize
                this.searchHandler()
            },
            searchHandler() {
                getBedroomType(this.searchForm).then(res => {
                    this.tableData = res.data.records
                    this.page.total = res.data.total
                })
            }
        }
    }
</script>

<style scoped>
</style>
